<template>
  <div class="list-temple">
    <!-- /**
    *@description:这是一个点击显示或者隐藏子内容列表
    */-->
    <div class="listtemple-title">{{ nmtitle }}</div>
    <div v-for="(item,index) in zhlist" :key="index" class="list-all">
      <div class="list-name" @click="item.show = !item.show">
        {{ item.name }}
        <i v-if="item.show" class="el-icon-arrow-down icon-li"></i>
        <i v-if="!item.show" class="el-icon-arrow-up icon-li"></i>
      </div>
      <ul v-if="item.child && item.child.length>0 && item.show === true">
        <li
          v-for="(hit,hin) in item.child"
          :key="hin"
          :class="hit.isclick === true ?'backline':''"
          @click="getlimes(hit, index, hin)"
        >{{ hit.name }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    nmtitle: {
      type: String,
      default: "选择栋舍"
    },
    nmlist: {
      type: Array,
      default: () => [
        {
          name: "001田法林",
          show: true,
          child: [
            { name: "东区一号田", isclick: false },
            { name: "中区二号田", isclick: false },
            { name: "西区二号田", isclick: false }
          ]
        }
      ]
    }
  },
  data() {
    return {
      zhlist: [
        {
          name: "001田法林",
          show: true,
          child: [
            { name: "东区一号田", isclick: false },
            { name: "中区二号田", isclick: false },
            { name: "西区二号田", isclick: false }
          ]
        }
      ]
    };
  },
  watch: {
    nmlist(newval) {
      this.zhlist = newval;
      console.log(newval);
      this.chancedata();
    }
  },
  mounted() {
    this.defaultclick();
  },
  methods: {
    chancedata() {
      let testlist = this.zhlist;
      this.zhlist = [];
      testlist.forEach(item => {
        let childlist = [];
        item.child.forEach(hj => {
          let iol = { name: hj.name, isclick: false };
          childlist.push(iol);
        });
        let jkl = {
          name: item.name,
          child: childlist,
          show: true,
          isclick: false
        };
        this.zhlist.push(jkl);
      });
    },
    // 默认选中方法
    defaultclick() {
      let ismes = this.zhlist[0]["child"][0];
      if (ismes) {
        this.getlimes(this.zhlist[0], 0, 0);
      }
    },
    // 点击详情
    getlimes(e, indexone, indextwo) {
      this.chancedata();
      //   console.log(e)
      this.zhlist[indexone]["child"][indextwo]["isclick"] = true;
      this.$emit("lival", e);
    }
  }
};
</script>
<style lang="scss" scoped>
.list-temple {
  width: 270px;
  height: 100%;
  margin-left: 10px;
  background-color: rgba(0, 72, 90, 0.7);
  padding: 10px;
  .listtemple-title {
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-bottom: rgb(202, 221, 221) dashed 1px;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .list-all {
    border: solid 1px #fff;
    .list-name {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: center;
      border-bottom: solid 1px #fff;
      padding-left: 20px;
      cursor: pointer;
      .icon-li {
        margin: 5px 4px;
        float: right;
      }
    }
    ul {
      margin: 0;
      list-style: none;
      cursor: pointer;
      padding: 0;
      width: 248px;
      text-align: center;
      li {
        margin: 0;
        line-height: 40px;
        list-style: none;
        text-align: center;
        width: 248px;
        border-bottom: $appMainTextColor 1px solid;
      }
    }
    .backline {
      background-image: linear-gradient(to bottom, #75efd2, #44cec6, #0fa2ba);
    }
  }
}
</style>
